<div class="formRow formRow_{{name}}">
    <label for="{{ name }}">Ubicación:</label>
    <div class="control">
        <input type="text" id="{{ name }}" value="{{ ubicacion_text }}" name="ubicacion_text">
        <div id="{{ name }}-ctrLocalidad" class="control control-localidad">
            <div class="label" id="{{ name }}-ubicacion-seleccionada" style="display: none;">Ubicación seleccionada:
                <span id="{{ name }}-locale_name">
                    {{ ubicacion_text }}
                </span>
            </div>

            <input id="{{ name }}-pais_hi" name="control_u_pais" type="hidden" value="{{ pais }}"/>
            <input id="{{ name }}-provincia_hi" name="control_u_provincia" type="hidden" value="{{ provincia }}"/>
            <input id="{{ name }}-ciudad_hi" name="control_u_ciudad" type="hidden" value="{{ ciudad }}"/>
            <input id="{{ name }}-latitude_hi" name="control_u_latitude" type="hidden" value="{{ latitude }}"/>
            <input id="{{ name }}-longitude_hi" name="control_u_longitude" type="hidden" value="{{ longitude }}"/>

        </div>
        <div id="{{ name }}-mapa-preview" class="mapa">
            {% if(latitude) %}
                <img src="http://maps.google.com/maps/api/staticmap?sensor=false&center={{ longitude }},{{ latitude }}&zoom=15&size=230x230&markers=color:red|label:P|{{ longitude }},{{ latitude }}"/>
            {% endif %}
        </div>
    </div>
</div>

<script type="text/javascript">
$(function() {
    $( "#{{ name }}" ).autocomplete({
        source: "{{ path('googleUbicacion') }}",
        minLength: 2,
        delay: 900,
        select: function( event, ui ) {
            $('#{{ name }}-ubicacion-seleccionada').show();
            $('#{{ name }}-pais_hi').val(ui.item.pais);
            $('#{{ name }}-provincia_hi').val(ui.item.provincia);
            $('#{{ name }}-ciudad_hi').val(ui.item.localidad);
            $('#{{ name }}-latitude_hi').val(ui.item.lattitude);
            $('#{{ name }}-longitude_hi').val(ui.item.longitude);
            $('#{{ name }}-ctrLocalidad').show();
            $('#{{ name }}-locale_name').html(ui.item.label);
            var image_url = "http://maps.google.com/maps/api/staticmap?sensor=false&center="+ui.item.longitude+","+ui.item.lattitude+"&zoom=15&size=230x230&markers=color:red|label:P|"+ui.item.longitude+","+ui.item.lattitude;
            $('#{{ name }}-mapa-preview').html("");
            $('#{{ name }}-mapa-preview').append(
                $(document.createElement("img")).attr("src", image_url).attr('id','map')
            );
            $('#{{ name }}-ctrLocalidad label').hide();
        }
    });
});
</script>